<template>
    <div class="app-header" :style="{background: bg}" :class="{reverse: colorReverse}">
        <img src="../assets/image/back-dark.png" v-if="!colorReverse" @click="back">
        <img src="../assets/image/back.png" v-if="colorReverse" @click="back">
        <span class="title">
            <slot></slot>
        </span>
        <span class="right">
            <slot name="right"></slot>
        </span>
    </div>
</template>

<script>
    export default {
        name: "Header",
        props: {
            bg: {
                type: String,
                default: '#fff'
            },
            colorReverse: {
                type: Boolean,
                default: false
            },
            onback: {
                type: Function,
                default: undefined
            }
        },
        methods: {
            back() {
                if (this.onback) {
                    this.onback();
                } else {
                    this.$router.go(-1);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-header {
        width: 100vw;
        height: 50/3.75+vw;
        line-height: 50/3.75+vw;
        color: #333;
        text-align: center;
        position: relative;
        &.reverse{
            color: #fff;
        }
        .title {
            font-size: 20/3.75+vw;
        }
        img {
            width: 25/3.75+vw;
            height: 25/3.75+vw;
            position: absolute;
            left: 10/3.75+vw;
            top: 12.5/3.75+vw;
            z-index: 2;
        }
        .right {
            position: absolute;
            right: 10/3.75+vw;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12/3.75+vw;
        }
    }
</style>
